<template>
  <div>
    <q-collapsible :group="group" separator class="bg-blue-grey-3" v-for="(element) in dragList" :key="element.name">
      <template slot="header">
        <div class="q-item-main q-item-section q-ml-md" >
          <div class="q-item-label">
            {{ element.prj_name }}/{{element.prj_name_en}}
            <q-icon v-show="element.status === 8" color="negative" name="fast_forward" size="25px"
                    @click.native.stop="$store.dispatch('listPublish/grayContinue',element.id)"></q-icon>
          </div>
          <div class="q-item-sublabel">{{element.status_text}}/{{element.endTime}}</div>
        </div>
      </template>
      <q-list no-border link inset-delimiter separator>
        <q-item v-for="(host, i) in element.hosts" :key="i">
          <q-item-side left v-if="showPv">
            流量：{{host.pv}}
          </q-item-side>
          <q-item-main :label="host.host__hostname"/>
          <q-item-side right>
            <q-spinner-cube v-if="!host.pub_status" :size="25" />
            <q-icon v-if="host.pub_status" name="done" size="25px"></q-icon>
          </q-item-side>
        </q-item>
      </q-list>
    </q-collapsible>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import QBtn from 'quasar-framework/src/components/btn/QBtn'
export default {
  name: 'pubDone',
  props: {
    dragList: {
      type: Array,
      default: null
    },
    showPv: {
      type: Boolean,
      default: false
    },
    group: {
      type: String,
      default: null
    }
  },
  methods: {
    log: function (evt) {
      window.console.log(evt)
    }
  },
  components: {
    QBtn,
    draggable
  }
}
</script>

<style scoped>

</style>
